@charset "utf-8";
@import "init";
$bg_color:#ff9344;
$text_color:#494949;


@function r($px){
	@return $px/50+rem;
}

.web{
	header{
		width: 100%;
		height: r(150);
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 0 r(22);
		box-sizing: border-box;
		.back_box{
			text-align:center;
			a{
				line-height: r(58);
				display: block;
				width: r(124);
				height: r(58);
				border: 1px solid $bg_color;
				border-radius: 10px;
				font-size: r(26);
				color: #000000;
				text-decoration: none;
			}
		}
		
		.search_box{
			p{
				
				font-size: r(26);
				color: #000000;
			}
		}
		
		.city_box{
			
			width: r(164);
			height: r(58);
			
			position: relative;
			form{
				select{
					width: r(164);
					height: r(58);
					vertical-align: top;
					border: 1px solid $bg_color;
					-webkit-appearance:none;
					padding: 0 r(10);
				}
				.triangle{
					width:0;
					height: 0;
					border: r(14) solid;
					border-color: orange transparent transparent;
					position: absolute;
					top: 10px;
					right: 4px;
				}
			}
		}
			
	
	
	}
	
	main{
		padding: 0 r(22);
		box-sizing: border-box;
		position: absolute;
		left: 0;
		top: r(150);
		bottom: r(107);
		width: 100%;
		
		overflow-y: auto;
		.search_box{
			width: r(268);
			height: r(55);
			text-align: center;
			margin: 0 auto;
			
			form{
				border: 1px solid $bg_color;
				border-radius: 30px;
				padding: 0 r(10);
				font-size: 0;
				box-sizing: border-box;
				input{
					width: r(200);
					height: r(50);
					border: none;
					font-size: r(24);
					color: #777777;
					padding: 0 r(4);
					background-color:transparent;
					outline: none;
					box-sizing: border-box;
					vertical-align:middle;
				}
				button{
					border: none;
					background-color: transparent;
					vertical-align:middle;
					i{
						color:$bg_color;
						
					}
				}
			}
		}
	
		p{
			font-size: r(26);
			text-align: center;
			margin-top: r(32);
		}
		
		.serch{
			width: r(514);
			height: r(132);
			display: flex;
			flex-wrap: wrap;
			margin: 0 auto;
			margin-top: r(10);
			p{
				width: r(124);
				height: r(64);
				background-color: #dcdcdc;
				font-size: r(20);
				color: #898989;
				margin-left: r(4);
				margin-top: r(4);
				line-height: r(64);
			}
		}
	
		.title{
			width: 100%;
			height: r(93);
			// background-color: red;
			padding: 0 r(22);
			box-sizing: border-box;
			display: flex;
			justify-content: space-between;
			align-items: flex-end;
			.bulk_box{
				
				i{
					font-size: r(55);
					color: $bg_color;
					vertical-align:middle;
				}
				span{
					font-size: r(30);
					color: #000;
					vertical-align:middle;
				}
			}
		
			.more_box{
				font-size: 0;
				margin-bottom: r(10);
				i{
					font-size: r(26);
					color: $bg_color;
					vertical-align:middle;
				}
				span{
					font-size: r(26);
					color: #000;
					vertical-align:middle;
				}
			}
		}
	
		.photo{
			display: flex;
			margin-top: r(20);
			.img_box1{
				width: r(280);
				height: r(357);
				overflow: hidden;
				img{
					width: 100%;
				}
			}
			.right{
				width: r(420);
				height: r(357);
				font-size: 0;
				margin-left: r(10);
				.img_box2{
					width: r(420);
					height: r(146);
					overflow: hidden;
					margin-bottom:r(8);
					img{
						width: 100%;
					}
				}
				.img_box3{
					display: inline-block;
					width: r(196);
					height: r(196);
					overflow: hidden;
					img{
						width: 100%;
					}
				}
				.img_box4{
					width: r(210);
					height: r(196);
					overflow: hidden;
					display: inline-block;
					margin-left: r(10);
					img{
						width: 100%;
					}
				}
			}
		}
	
		.picture{
			display: flex;
			justify-content: space-between;
			margin-top: r(20);
			.picture_box{
				width: r(228);
				height: r(200);
				overflow: hidden;
				img{
					width: 100%;
				}
			}
		}
	
	}
	
	
	
	
	footer{
		ul{
			display: flex;
			justify-content: space-between;
			position: absolute;
			bottom: 0;
			left: 0;
			width: 100%;
			background-color: white;
			li{
				width: 25%;
				text-align: center;
				i{
					font-size: r(72);
					color: $bg_color;
				}
				p{
					font-size: r(26);
					color: black;
				}
			}
		}
	}
}